<template>
  <div class="course-3d-classroom">
    <!-- 3D场景容器 - 暂时用图片模拟 -->
    <div class="classroom-scene" :class="currentScene">
      <div class="scene-bg" :style="sceneBackgroundStyle"></div>
      
      <!-- 数字人讲师 -->
      <div class="digital-teacher" :class="teacherState" v-if="showTeacher">
        <div class="teacher-avatar">
          <img :src="currentTeacher.avatar" :alt="currentTeacher.name">
        </div>
        <div class="teacher-name">{{ currentTeacher.name }}</div>
        <div class="teacher-speech" v-if="teacherSpeech">
          <div class="speech-bubble">{{ teacherSpeech }}</div>
        </div>
      </div>
      
      <!-- PPT全息屏 -->
      <div class="hologram-ppt" :class="viewMode" v-if="showPPT">
        <div class="ppt-frame">
          <div class="ppt-content">
            <h2>{{ currentSlide.title }}</h2>
            <div class="slide-content" v-html="currentSlide.content"></div>
            <div class="slide-number">{{ currentSlideIndex + 1 }} / {{ slides.length }}</div>
          </div>
        </div>
      </div>
      
      <!-- 学生视角指示器 -->
      <div class="student-seats" :class="viewMode">
        <div class="seat" v-for="seat in studentSeats" :key="seat.id" :class="seat.status">
          <div class="seat-indicator"></div>
        </div>
      </div>
    </div>
    
    <!-- UI控制层 -->
    <div class="ui-overlay">
      <!-- 顶部控制栏 -->
      <div class="top-controls" :class="{ hidden: isLeftPanelHidden }">
        <div class="scene-selector">
          <h2>🏫 3D智慧课堂</h2>
          <div class="scene-buttons">
            <button 
              v-for="scene in scenes" 
              :key="scene.id"
              :class="['scene-btn', { active: currentScene === scene.id }]"
              @click="switchScene(scene.id)"
            >
              <span class="scene-icon">{{ scene.icon }}</span>
              <span>{{ scene.name }}</span>
            </button>
          </div>
        </div>
        
        <div class="session-selector">
          <label>课程环节：</label>
          <select v-model="currentSession" @change="switchSession">
            <option v-for="session in sessions" :key="session.id" :value="session.id">
              {{ session.name }}
            </option>
          </select>
        </div>
      </div>
      
             <!-- 左侧控制面板 -->
       <div class="left-panel" :class="{ hidden: isLeftPanelHidden }">
         <div class="view-controls">
          <h3>🎥 视角控制</h3>
          <div class="view-buttons">
            <button 
              v-for="view in viewModes" 
              :key="view.id"
              :class="['view-btn', { active: viewMode === view.id }]"
              @click="switchView(view.id)"
            >
              {{ view.name }}
            </button>
          </div>
        </div>
        
        <div class="movement-controls">
          <h3>🚶 移动模式</h3>
          <div class="movement-buttons">
            <button 
              :class="['move-btn', { active: movementMode === 'walk' }]"
              @click="setMovementMode('walk')"
            >
              步行漫游
            </button>
            <button 
              :class="['move-btn', { active: movementMode === 'fly' }]"
              @click="setMovementMode('fly')"
            >
              自由飞行
            </button>
          </div>
        </div>
        
                 <div class="interaction-panel">
           <h3>🎛️ 互动控制</h3>
           <div class="interaction-buttons">
             <button @click="toggleTeacher" :class="{ active: showTeacher }">
               数字人讲师
             </button>
             <button @click="togglePPT" :class="{ active: showPPT }">
               全息PPT
             </button>
             <button @click="startQA" class="qa-btn">
               举手问答
             </button>
             <button @click="startContinuousQA" class="continuous-qa-btn">
               连续问答
             </button>
             <button @click="openWhiteboard" class="wb-btn">
               3D白板
             </button>
           </div>
         </div>
         
         <div class="teacher-ai-panel">
           <h3>🤖 AI数字语言</h3>
           <div class="ai-controls">
             <button @click="toggleTeacherSpeech" :class="['speech-btn', { active: isSpeaking }]">
               {{ isSpeaking ? '🔊 正在讲话' : '🎙️ 开始讲话' }}
             </button>
             <button @click="toggleVoiceInteraction" :class="['voice-btn', { active: voiceInteractionEnabled }]">
               {{ voiceInteractionEnabled ? '👂 语音互动中' : '🎧 启用语音互动' }}
             </button>
             <button @click="changeSpeechSpeed" class="speed-btn">
               🚀 语速: {{ speechSpeed }}x
             </button>
           </div>
           
           <div class="speech-topics">
             <h4>🗣️ 讲话主题</h4>
             <select v-model="selectedTopic" @change="speakTopic" class="topic-select">
               <option value="">选择讲话内容</option>
               <option v-for="topic in speechTopics" :key="topic.id" :value="topic.id">
                 {{ topic.name }}
               </option>
             </select>
           </div>
           
           <div class="ai-status">
             <div class="status-item">
               <span class="status-label">AI状态:</span>
               <span class="status-value" :class="aiStatus">{{ getAIStatusText() }}</span>
             </div>
             <div class="status-item">
               <span class="status-label">语言:</span>
               <span class="status-value">{{ currentLanguage }}</span>
             </div>
           </div>
         </div>
      </div>
      
      <!-- 右侧信息面板 -->
      <div class="right-panel">
        <div class="course-info">
          <h3>📚 当前课程</h3>
          <div class="course-card">
            <h4>{{ currentCourse.name }}</h4>
            <p>教师: {{ currentCourse.teacher }}</p>
            <p>进度: {{ currentCourse.progress }}%</p>
            <div class="progress-bar">
              <div class="progress-fill" :style="{ width: currentCourse.progress + '%' }"></div>
            </div>
          </div>
        </div>
        
        <div class="participants">
          <h3>👥 在线学员 ({{ onlineStudents.length }})</h3>
          <div class="student-list">
            <div v-for="student in onlineStudents" :key="student.id" class="student-item">
              <div class="student-avatar" :class="student.status"></div>
              <span>{{ student.name }}</span>
            </div>
          </div>
        </div>
        
        <div class="learning-stats">
          <h3>📊 学习统计</h3>
          <div class="stat-item">
            <span>课程时长: {{ sessionTime }}</span>
          </div>
          <div class="stat-item">
            <span>互动次数: {{ interactionCount }}</span>
          </div>
          <div class="stat-item">
            <span>注意力: {{ attentionLevel }}%</span>
          </div>
        </div>
      </div>
      
      <!-- 底部控制栏 -->
      <div class="bottom-controls" :class="{ hidden: isLeftPanelHidden }">
        <div class="ppt-controls" v-if="showPPT">
          <button @click="prevSlide" :disabled="currentSlideIndex === 0">
            ⬅️ 上一页
          </button>
          <span>{{ currentSlideIndex + 1 }} / {{ slides.length }}</span>
          <button @click="nextSlide" :disabled="currentSlideIndex === slides.length - 1">
            下一页 ➡️
          </button>
          <button @click="openPPTViewer" class="ppt-viewer-btn">
            🔍 PPT特写
          </button>
        </div>
        
        <div class="media-controls">
          <button @click="toggleMicrophone" :class="{ active: microphoneOn }">
            🎤 {{ microphoneOn ? '静音' : '开麦' }}
          </button>
          <button @click="toggleCamera" :class="{ active: cameraOn }">
            📹 {{ cameraOn ? '关闭摄像头' : '开启摄像头' }}
          </button>
          <button @click="shareScreen" class="share-btn">
            🖥️ 共享屏幕
          </button>
        </div>
        
        <div class="session-info">
          <span>当前环节: {{ getCurrentSessionName() }}</span>
          <span>|</span>
          <span>场景: {{ getCurrentSceneName() }}</span>
          <span>|</span>
          <span>视角: {{ getCurrentViewName() }}</span>
        </div>
      </div>
      
          <!-- 加载指示器 -->
    <div v-if="isLoading" class="loading-indicator">
      <div class="spinner"></div>
      <p>正在加载3D课堂场景...</p>
    </div>
    

      
             <!-- 左侧面板切换按钮 -->
       <div class="panel-toggle-btn" @click="toggleLeftPanel">
         <span v-if="isLeftPanelHidden">📋</span>
         <span v-else>📋</span>
         <div class="toggle-tooltip">
           {{ isLeftPanelHidden ? '显示控制面板' : '隐藏控制面板' }}
         </div>
       </div>
       
       <!-- 全屏模式指示器 -->
       <div v-if="isLeftPanelHidden" class="fullscreen-indicator">
         <div class="indicator-text">🖥️ 全屏模式</div>
         <div class="indicator-hint">点击左上角按钮恢复所有控制面板</div>
       </div>
       
       <!-- 帮助提示 -->
       <div class="help-tips" :class="{ 'fullscreen-mode': isLeftPanelHidden }">
         <div class="tip">💡 使用WASD键移动视角</div>
         <div class="tip">💡 鼠标拖拽调整观察角度</div>
         <div class="tip">💡 滚轮缩放调整距离</div>
         <div class="tip">🎯 点击场景元素进行互动</div>
         <div class="tip">⌨️ Tab键切换控制面板</div>
         <div class="tip">🖥️ F11键浏览器全屏</div>
         <div v-if="isLeftPanelHidden" class="tip">📋 点击左上角按钮或按Tab键显示控制面板</div>
         <div v-if="isLeftPanelHidden" class="tip">⚡ Esc键快速退出全屏模式</div>
       </div>
       
       <!-- 连续问答面板 -->
       <div v-if="showContinuousQA" class="continuous-qa-panel">
         <div class="qa-header">
           <h3>🤖 智慧课程连续问答</h3>
           <button @click="closeContinuousQA" class="close-btn">✕</button>
         </div>
         
         <div class="qa-content">
           <!-- 对话历史 -->
           <div class="conversation-history" ref="conversationHistory">
             <div 
               v-for="(message, index) in conversationHistory" 
               :key="index"
               :class="['message', message.type]"
             >
               <div class="message-avatar">
                 <span v-if="message.type === 'user'">👤</span>
                 <span v-else>🤖</span>
               </div>
               <div class="message-content">
                 <div class="message-text" v-html="message.content"></div>
                 <div class="message-time">{{ message.timestamp }}</div>
               </div>
             </div>
             
             <!-- AI思考中指示器 -->
             <div v-if="isAIThinking" class="message ai thinking">
               <div class="message-avatar">🤖</div>
               <div class="message-content">
                 <div class="thinking-indicator">
                   <span class="dot"></span>
                   <span class="dot"></span>
                   <span class="dot"></span>
                   <span class="thinking-text">AI正在思考中...</span>
                 </div>
               </div>
             </div>
           </div>
           
           <!-- 快速问题建议 -->
           <div class="quick-questions" v-if="!isAIThinking">
             <h4>💡 快速提问</h4>
             <div class="question-tags">
               <button 
                 v-for="question in suggestedQuestions" 
                 :key="question.id"
                 @click="askQuickQuestion(question.text)"
                 class="question-tag"
               >
                 {{ question.text }}
               </button>
             </div>
           </div>
           
           <!-- 输入区域 -->
           <div class="qa-input-area">
             <div class="input-controls">
               <button 
                 @click="toggleVoiceInput" 
                 :class="['voice-input-btn', { active: isVoiceInputActive }]"
                 :disabled="isAIThinking"
               >
                 {{ isVoiceInputActive ? '🎤 停止录音' : '🎙️ 语音提问' }}
               </button>
               <button 
                 @click="clearConversation" 
                 class="clear-btn"
                 :disabled="conversationHistory.length === 0"
               >
                 🗑️ 清空对话
               </button>
             </div>
             
             <div class="input-wrapper">
               <textarea
                 v-model="currentQuestion"
                 @keydown.enter.prevent="submitQuestion"
                 @input="handleInputChange"
                 placeholder="请输入您的问题，支持课程相关的任何疑问..."
                 class="question-input"
                 :disabled="isAIThinking"
                 rows="3"
               ></textarea>
               <button 
                 @click="submitQuestion"
                 :disabled="!currentQuestion.trim() || isAIThinking"
                 class="submit-btn"
               >
                 {{ isAIThinking ? '⏳' : '📤' }}
               </button>
             </div>
             
             <!-- 输入提示 -->
             <div class="input-hints">
               <span class="hint">💡 提示：您可以询问课程内容、概念解释、实践应用等问题</span>
               <span class="hint">🎯 当前课程：{{ currentCourse.name }}</span>
             </div>
           </div>
         </div>
         
         <!-- 问答统计 -->
         <div class="qa-stats">
           <div class="stat">
             <span class="stat-label">本次对话:</span>
             <span class="stat-value">{{ conversationHistory.length }}条</span>
           </div>
           <div class="stat">
             <span class="stat-label">解答准确率:</span>
             <span class="stat-value">{{ qaAccuracy }}%</span>
           </div>
           <div class="stat">
             <span class="stat-label">响应时间:</span>
             <span class="stat-value">{{ avgResponseTime }}s</span>
           </div>
         </div>
       </div>
     </div>
    
    <!-- 3D问答弹窗 -->
    <QA3DDialog 
      v-if="showQADialog"
      @close="closeQA"
      @submit="submitAnswer"
    />
    
    <!-- PPT特写组件 -->
    <PPTViewer3D 
      :visible="showPPTViewer"
      :courseTitle="currentCourse ? currentCourse.name : '课程PPT'"
      @close="closePPTViewer"
    />
  </div>
</template>

<script>
import { gsap } from 'gsap'
import QA3DDialog from '@/components/3d/QA3DDialog.vue'
import PPTViewer3D from '@/views/3d/PPTViewer3D.vue'

import courseDataManager from '@/utils/courseDataManager'

export default {
  name: 'Course3DClassroom',
  components: {
    QA3DDialog,
    PPTViewer3D
  },
  data() {
    return {
      // 场景控制
      currentScene: 'lecture-hall',
      scenes: [
        { 
          id: 'lecture-hall', 
          name: '大讲堂', 
          icon: '🏛️', 
          images: {
            close: './static/img/01-jin.png',
            medium: './static/img/01-zhong.png',
            far: './static/img/01-yuan.png',
            ppt: './static/img/texie.png'
          }
        },
        { 
          id: 'lab', 
          name: '实验室', 
          icon: '🔬', 
          images: {
            close: './static/img/02-jin.png',
            medium: './static/img/02-zhong.png',
            far: './static/img/02-yuan.png',
            ppt: './static/img/texie.png' //
          }
        },
        { 
          id: 'seminar', 
          name: '研讨室', 
          icon: '💼', 
          images: {
            close: './static/img/03-jin.png',
            medium: './static/img/03-zhong.png',
            far: './static/img/03-yuan.png',
            ppt: './static/img/texie.png' //
          }
        }
      ],
      
      // 课程环节
      currentSession: 'introduction',
      sessions: [
        { id: 'introduction', name: '课程介绍' },
        { id: 'theory', name: '理论讲解' },
        { id: 'practice', name: '实践操作' },
        { id: 'discussion', name: '讨论互动' },
        { id: 'summary', name: '总结回顾' }
      ],
      
      // 视角模式
      viewMode: 'medium',
      viewModes: [
        { id: 'ppt', name: 'PPT特写' },
        { id: 'close', name: '近景' },
        { id: 'medium', name: '中景' },
        { id: 'far', name: '远景' }
      ],
      
      // 移动模式
      movementMode: 'walk',
      
      // 数字人讲师
      showTeacher: true,
      teacherState: 'teaching',
      teacherSpeech: '欢迎大家来到3D智慧课堂！今天我们将学习人工智能基础知识。',
             currentTeacher: {
         name: '张教授',
         avatar: 'static/img/teacher.png',
         subject: '人工智能'
       },
      
      // PPT全息屏
      showPPT: true,
      currentSlideIndex: 0,
      currentCourseId: 'ai-basics-001', // 当前课程ID
      slides: [], // 将从数据管理器动态加载
      
      // PPT特写功能
      showPPTViewer: false,
      
      // 原有的测试数据保留作为备份
      _originalSlides: [
        {
          title: '人工智能基础',
          content: '<p>什么是人工智能？</p><ul><li>机器学习</li><li>深度学习</li><li>神经网络</li></ul>'
        },
        {
          title: '机器学习算法',
          content: '<p>主要算法分类：</p><ul><li>监督学习</li><li>无监督学习</li><li>强化学习</li></ul>'
        },
        {
          title: '实际应用案例',
          content: '<p>AI在各行业的应用：</p><ul><li>医疗诊断</li><li>自动驾驶</li><li>智能推荐</li></ul>'
        }
      ],
      
      // 学生座位
      studentSeats: [
        { id: 1, status: 'occupied' },
        { id: 2, status: 'occupied' },
        { id: 3, status: 'empty' },
        { id: 4, status: 'occupied' },
        { id: 5, status: 'empty' },
        { id: 6, status: 'occupied' }
      ],
      
      // 当前课程信息
      currentCourse: {
        name: '人工智能基础',
        teacher: '张教授',
        progress: 75
      },
      
      // 在线学员
      onlineStudents: [
        { id: 1, name: '张三', status: 'active' },
        { id: 2, name: '李四', status: 'listening' },
        { id: 3, name: '王五', status: 'questioning' },
        { id: 4, name: '赵六', status: 'active' }
      ],
      
      // 学习统计
      sessionTime: '45:30',
      interactionCount: 12,
      attentionLevel: 85,
      
      // 媒体控制
      microphoneOn: false,
      cameraOn: false,
      
             // UI状态
       isLoading: false,
       showQADialog: false,
       showContinuousQA: false,
       isLeftPanelHidden: false,
       

       
       // AI数字语言功能
       isSpeaking: false,
       voiceInteractionEnabled: false,
       speechSpeed: 1.0,
       currentLanguage: '中文',
       aiStatus: 'ready', // ready, speaking, listening, processing
       selectedTopic: '',
       speechTopics: [
         { id: 'welcome', name: '欢迎致辞', content: '欢迎大家来到3D智慧课堂！我是您的AI数字教师，今天将为大家带来精彩的人工智能基础课程。' },
         { id: 'introduction', name: '课程介绍', content: '本节课我们将学习人工智能的基础概念，包括机器学习、深度学习和神经网络等核心内容。' },
         { id: 'theory', name: '理论讲解', content: '人工智能是计算机科学的一个分支，旨在创造能够执行通常需要人类智能的任务的系统。' },
         { id: 'practice', name: '实践指导', content: '现在让我们通过实际案例来理解AI算法的工作原理，请大家跟着我的演示操作。' },
         { id: 'qa', name: '问答互动', content: '现在是问答时间，大家有什么问题可以随时提出，我会为大家详细解答。' },
         { id: 'summary', name: '课程总结', content: '今天我们学习了人工智能的基础知识，希望大家能够深入理解并在实践中应用这些概念。' }
       ],
       speechSynthesis: null,
       currentUtterance: null,
       
       // 连续问答功能
       conversationHistory: [],
       currentQuestion: '',
       isAIThinking: false,
       isVoiceInputActive: false,
       qaAccuracy: 95,
       avgResponseTime: 1.2,
       suggestedQuestions: [
         { id: 1, text: '什么是机器学习？' },
         { id: 2, text: '深度学习的应用场景' },
         { id: 3, text: '神经网络如何工作？' },
         { id: 4, text: '监督学习和无监督学习的区别' },
         { id: 5, text: '如何开始学习AI？' },
         { id: 6, text: '人工智能的发展前景' }
       ],
       knowledgeBase: {
         '机器学习': {
           definition: '机器学习是人工智能的一个分支，它使计算机能够在没有明确编程的情况下学习和改进。',
           applications: ['图像识别', '自然语言处理', '推荐系统', '预测分析'],
           types: ['监督学习', '无监督学习', '强化学习']
         },
         '深度学习': {
           definition: '深度学习是机器学习的一个子集，使用多层神经网络来模拟人脑的工作方式。',
           applications: ['计算机视觉', '语音识别', '自然语言处理', '游戏AI'],
           advantages: ['自动特征提取', '处理复杂数据', '高准确率']
         },
         '神经网络': {
           definition: '神经网络是由相互连接的节点（神经元）组成的计算模型，模拟生物神经系统。',
           components: ['输入层', '隐藏层', '输出层', '权重', '偏置'],
           types: ['前馈神经网络', '卷积神经网络', '循环神经网络']
         },
         '监督学习': {
           definition: '监督学习使用标记的训练数据来学习输入和输出之间的映射关系。',
           examples: ['分类问题', '回归问题', '图像标注', '情感分析'],
           algorithms: ['线性回归', '决策树', '支持向量机', '随机森林']
         }
       },
       voiceRecognition: null
    }
  },
  computed: {
    currentSlide() {
      return this.slides[this.currentSlideIndex] || {}
    },
         sceneBackgroundStyle() {
       const scene = this.scenes.find(s => s.id === this.currentScene)
       const imageUrl = scene.images[this.viewMode] || scene.images.medium
       return {
         backgroundImage: `url(${imageUrl})`,
         backgroundSize: 'cover',
         backgroundPosition: 'center'
       }
     }
  },
     mounted() {
     this.initClassroom()
     this.loadCourseData()
     this.startLiveUpdates()
     this.initSpeechSynthesis()
     this.initKeyboardShortcuts()
     this.setupDataListener()
   },
     beforeDestroy() {
     if (this.updateTimer) {
       clearInterval(this.updateTimer)
     }
     // 停止语音合成
     if (this.currentUtterance) {
       this.speechSynthesis.cancel()
     }
     // 移除键盘事件监听
     this.removeKeyboardShortcuts()
     // 移除数据监听器
     if (this.dataListener) {
       courseDataManager.removeListener(this.dataListener)
     }
   },
  methods: {
    // 加载课程数据
    loadCourseData() {
      const courseData = courseDataManager.getCourse(this.currentCourseId)
      if (courseData) {
        // 更新课程信息
        this.currentCourse.name = courseData.title
        this.currentCourse.teacher = courseData.teacher.name
        this.currentTeacher = courseData.teacher
        
        // 加载3D课堂slides数据
        this.slides = courseDataManager.getCourseClassroomSlides(this.currentCourseId)
        
        // 更新教师语音内容
        if (this.slides.length > 0) {
          this.teacherSpeech = this.slides[0].voiceScript || this.teacherSpeech
        }
        
        console.log('课程数据加载完成:', courseData.title, '共', this.slides.length, '页讲稿')
      } else {
        console.warn('未找到课程数据，使用默认数据')
        this.slides = this._originalSlides
      }
    },
    
    // 设置数据监听器
    setupDataListener() {
      this.dataListener = (event, data) => {
        if (data.courseId === this.currentCourseId) {
          switch (event) {
            case 'slideUpdated':
              this.handleSlideUpdated(data)
              break
            case 'slideAdded':
              this.handleSlideAdded(data)
              break
            case 'slideDeleted':
              this.handleSlideDeleted(data)
              break
          }
        }
      }
      courseDataManager.addListener(this.dataListener)
    },
    
    // 处理讲稿更新
    handleSlideUpdated(data) {
      const slideIndex = this.slides.findIndex(slide => slide.id === data.slideId)
      if (slideIndex !== -1) {
        // 重新加载slides数据
        this.slides = courseDataManager.getCourseClassroomSlides(this.currentCourseId)
        console.log('讲稿已更新:', data.slideId)
        
        // 如果当前正在显示更新的讲稿，刷新显示
        if (this.currentSlideIndex === slideIndex) {
          this.$forceUpdate()
        }
      }
    },
    
    // 处理讲稿添加
    handleSlideAdded(data) {
      this.slides = courseDataManager.getCourseClassroomSlides(this.currentCourseId)
      console.log('新讲稿已添加:', data.slideData.title)
    },
    
    // 处理讲稿删除
    handleSlideDeleted(data) {
      this.slides = courseDataManager.getCourseClassroomSlides(this.currentCourseId)
      // 如果删除的是当前显示的讲稿，切换到第一页
      if (this.currentSlideIndex >= this.slides.length) {
        this.currentSlideIndex = Math.max(0, this.slides.length - 1)
      }
      console.log('讲稿已删除:', data.slideId)
    },
    
         // 初始化课堂
     initClassroom() {
       this.isLoading = true
       
       // 预加载图片资源
       this.preloadImages().then(() => {
         // 模拟加载过程
         setTimeout(() => {
           this.isLoading = false
           this.showWelcomeMessage()
         }, 1000)
       })
     },
     
     // 预加载图片
     preloadImages() {
       return new Promise((resolve) => {
         const imagePromises = []
         
         // 预加载所有场景的图片
         this.scenes.forEach(scene => {
           Object.values(scene.images).forEach(imageUrl => {
             const promise = new Promise((imgResolve) => {
               const img = new Image()
               img.onload = () => imgResolve()
               img.onerror = () => imgResolve() // 即使加载失败也继续
               img.src = imageUrl
             })
             imagePromises.push(promise)
           })
         })
         
         // 预加载教师头像
         const teacherImgPromise = new Promise((imgResolve) => {
           const img = new Image()
           img.onload = () => imgResolve()
           img.onerror = () => imgResolve()
           img.src = this.currentTeacher.avatar
         })
         imagePromises.push(teacherImgPromise)
         
         Promise.all(imagePromises).then(() => {
           console.log('所有课堂图片资源预加载完成')
           resolve()
         })
       })
     },
    
    // 欢迎消息
    showWelcomeMessage() {
      this.teacherSpeech = '欢迎大家来到3D智慧课堂！今天我们将学习人工智能基础知识。'
      setTimeout(() => {
        this.teacherSpeech = ''
      }, 5000)
    },
    
         // 切换场景
     switchScene(sceneId) {
       if (this.currentScene === sceneId) return
       
       const oldScene = this.currentScene
       this.currentScene = sceneId
       const scene = this.scenes.find(s => s.id === sceneId)
       
       // 播放切换动画 - 先淡出旧场景
       gsap.to('.scene-bg', {
         opacity: 0,
         scale: 0.95,
         duration: 0.4,
         onComplete: () => {
           // 强制重新计算背景图片
           this.$forceUpdate()
           // 淡入新场景
           gsap.fromTo('.scene-bg', 
             { opacity: 0, scale: 1.1 },
             { opacity: 1, scale: 1, duration: 0.8, ease: 'power2.out' }
           )
         }
       })
       
       // 更新讲师话语
       this.teacherSpeech = `已切换到${scene.name}环境`
       setTimeout(() => {
         this.teacherSpeech = ''
       }, 3000)
     },
    
    // 切换课程环节
    switchSession() {
      const session = this.sessions.find(s => s.id === this.currentSession)
      this.teacherSpeech = `现在开始${session.name}环节`
      
      // 根据环节调整UI
      if (this.currentSession === 'practice') {
        this.viewMode = 'close'
      } else if (this.currentSession === 'theory') {
        this.showPPT = true
        this.viewMode = 'ppt'
      }
      
      setTimeout(() => {
        this.teacherSpeech = ''
      }, 3000)
    },
    
             // 切换视角
    switchView(viewId) {
      // 如果切换到PPT特写模式，直接打开PPT文件
      if (viewId === 'ppt') {
        this.openPPTViewer()
        return
      }
      
      this.viewMode = viewId
      
      // 视角切换动画 - 先淡出再淡入新背景
      gsap.to('.scene-bg', {
        opacity: 0,
        duration: 0.3,
        onComplete: () => {
          // 强制重新计算背景图片
          this.$forceUpdate()
          gsap.to('.scene-bg', {
            opacity: 1,
            duration: 0.5,
            ease: 'power2.out'
          })
        }
      })
      
      // 整体场景缩放动画
      gsap.fromTo('.classroom-scene', 
        { transform: 'scale(1.05)' },
        { transform: 'scale(1)', duration: 0.8, ease: 'power2.out' }
      )
    },
    
    // 设置移动模式
    setMovementMode(mode) {
      this.movementMode = mode
      this.teacherSpeech = mode === 'walk' ? '已切换为步行漫游模式' : '已切换为自由飞行模式'
      setTimeout(() => {
        this.teacherSpeech = ''
      }, 2000)
    },
    
    // 切换数字人讲师
    toggleTeacher() {
      this.showTeacher = !this.showTeacher
      if (this.showTeacher) {
        gsap.fromTo('.digital-teacher', 
          { opacity: 0, y: 50 },
          { opacity: 1, y: 0, duration: 0.8 }
        )
      }
    },
    
    // 切换PPT
    togglePPT() {
      this.showPPT = !this.showPPT
      if (this.showPPT) {
        gsap.fromTo('.hologram-ppt', 
          { opacity: 0, scale: 0.8 },
          { opacity: 1, scale: 1, duration: 0.8 }
        )
      }
    },
    
    // 打开PPT特写
    openPPTViewer() {
      this.showPPTViewer = true
      
      // 更新教师话语
      this.teacherSpeech = '正在为您打开PPT特写模式...'
      setTimeout(() => {
        this.teacherSpeech = ''
      }, 3000)
    },
    
    // 关闭PPT特写
    closePPTViewer() {
      this.showPPTViewer = false
    },
    

    
    // PPT控制
    prevSlide() {
      if (this.currentSlideIndex > 0) {
        this.currentSlideIndex--
        this.animateSlideTransition()
      }
    },
    
    nextSlide() {
      if (this.currentSlideIndex < this.slides.length - 1) {
        this.currentSlideIndex++
        this.animateSlideTransition()
      }
    },
    
    animateSlideTransition() {
      gsap.fromTo('.ppt-content', 
        { x: 100, opacity: 0 },
        { x: 0, opacity: 1, duration: 0.6 }
      )
    },
    
    // 媒体控制
    toggleMicrophone() {
      this.microphoneOn = !this.microphoneOn
    },
    
    toggleCamera() {
      this.cameraOn = !this.cameraOn
    },
    
    shareScreen() {
      alert('屏幕共享功能开发中...')
    },
    
    // 互动功能
    startQA() {
      this.showQADialog = true
    },
    
    closeQA() {
      this.showQADialog = false
    },
    
    submitAnswer(answer) {
      this.interactionCount++
      this.closeQA()
      this.teacherSpeech = '很好的问题！让我来为大家解答...'
      setTimeout(() => {
        this.teacherSpeech = ''
      }, 4000)
    },
    
    openWhiteboard() {
      alert('3D白板功能开发中...')
    },
    
    // 获取当前状态名称
    getCurrentSessionName() {
      const session = this.sessions.find(s => s.id === this.currentSession)
      return session ? session.name : ''
    },
    
    getCurrentSceneName() {
      const scene = this.scenes.find(s => s.id === this.currentScene)
      return scene ? scene.name : ''
    },
    
    getCurrentViewName() {
      const view = this.viewModes.find(v => v.id === this.viewMode)
      return view ? view.name : ''
    },
    
         // 启动实时更新
     startLiveUpdates() {
       this.updateTimer = setInterval(() => {
         // 更新学习统计
         const [minutes, seconds] = this.sessionTime.split(':').map(Number)
         const totalSeconds = minutes * 60 + seconds + 1
         const newMinutes = Math.floor(totalSeconds / 60)
         const newSeconds = totalSeconds % 60
         this.sessionTime = `${newMinutes}:${newSeconds.toString().padStart(2, '0')}`
         
         // 随机更新注意力水平
         if (Math.random() < 0.1) {
           this.attentionLevel = Math.max(70, Math.min(95, this.attentionLevel + (Math.random() - 0.5) * 10))
         }
       }, 1000)
     },
     
     // 初始化语音合成
     initSpeechSynthesis() {
       if ('speechSynthesis' in window) {
         this.speechSynthesis = window.speechSynthesis
         console.log('语音合成功能已初始化')
       } else {
         console.warn('浏览器不支持语音合成功能')
       }
     },
     
     // 切换教师语音
     toggleTeacherSpeech() {
       if (this.isSpeaking) {
         this.stopSpeech()
       } else {
         this.startAutoSpeech()
       }
     },
     
     // 开始自动讲话
     startAutoSpeech() {
       if (!this.speechSynthesis) return
       
       this.isSpeaking = true
       this.aiStatus = 'speaking'
       this.teacherState = 'speaking'
       
       // 根据当前环节选择合适的讲话内容
       const sessionTopicMap = {
         'introduction': 'welcome',
         'theory': 'theory',
         'practice': 'practice',
         'discussion': 'qa',
         'summary': 'summary'
       }
       
       const topicId = sessionTopicMap[this.currentSession] || 'welcome'
       const topic = this.speechTopics.find(t => t.id === topicId)
       
       if (topic) {
         this.speakText(topic.content)
       }
     },
     
     // 停止语音
     stopSpeech() {
       if (this.speechSynthesis && this.currentUtterance) {
         this.speechSynthesis.cancel()
       }
       this.isSpeaking = false
       this.aiStatus = 'ready'
       this.teacherState = 'teaching'
       this.teacherSpeech = ''
     },
     
     // 朗读指定主题
     speakTopic() {
       if (!this.selectedTopic) return
       
       const topic = this.speechTopics.find(t => t.id === this.selectedTopic)
       if (topic) {
         this.speakText(topic.content)
         this.isSpeaking = true
         this.aiStatus = 'speaking'
       }
     },
     
     // 语音朗读文本
     speakText(text) {
       if (!this.speechSynthesis) return
       
       // 停止当前语音
       this.speechSynthesis.cancel()
       
       // 创建新的语音实例
       this.currentUtterance = new SpeechSynthesisUtterance(text)
       this.currentUtterance.lang = 'zh-CN'
       this.currentUtterance.rate = this.speechSpeed
       this.currentUtterance.pitch = 1.0
       this.currentUtterance.volume = 0.8
       
       // 显示语音气泡
       this.teacherSpeech = text
       
       // 语音事件监听
       this.currentUtterance.onstart = () => {
         this.aiStatus = 'speaking'
         this.teacherState = 'speaking'
         console.log('开始语音播放')
       }
       
       this.currentUtterance.onend = () => {
         this.isSpeaking = false
         this.aiStatus = 'ready'
         this.teacherState = 'teaching'
         setTimeout(() => {
           this.teacherSpeech = ''
         }, 2000)
         console.log('语音播放结束')
       }
       
       this.currentUtterance.onerror = (error) => {
         console.error('语音播放错误:', error)
         this.isSpeaking = false
         this.aiStatus = 'ready'
         this.teacherSpeech = '语音播放出现错误'
         setTimeout(() => {
           this.teacherSpeech = ''
         }, 3000)
       }
       
       // 开始播放
       this.speechSynthesis.speak(this.currentUtterance)
     },
     
     // 切换语音互动
     toggleVoiceInteraction() {
       this.voiceInteractionEnabled = !this.voiceInteractionEnabled
       
       if (this.voiceInteractionEnabled) {
         this.aiStatus = 'listening'
         this.teacherSpeech = '语音互动已启用，您可以通过语音与我对话'
         this.startVoiceRecognition()
       } else {
         this.aiStatus = 'ready'
         this.teacherSpeech = '语音互动已关闭'
         this.stopVoiceRecognition()
       }
       
       setTimeout(() => {
         this.teacherSpeech = ''
       }, 3000)
     },
     
     // 启动语音识别
     startVoiceRecognition() {
       if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
         const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition
         this.recognition = new SpeechRecognition()
         this.recognition.lang = 'zh-CN'
         this.recognition.continuous = true
         this.recognition.interimResults = true
         
         this.recognition.onresult = (event) => {
           const result = event.results[event.results.length - 1]
           if (result.isFinal) {
             const transcript = result[0].transcript
             this.processVoiceCommand(transcript)
           }
         }
         
         this.recognition.onerror = (error) => {
           console.error('语音识别错误:', error)
           this.teacherSpeech = '语音识别出现错误，请重试'
           setTimeout(() => {
             this.teacherSpeech = ''
           }, 3000)
         }
         
         this.recognition.start()
       } else {
         console.warn('浏览器不支持语音识别功能')
         this.teacherSpeech = '您的浏览器不支持语音识别功能'
         setTimeout(() => {
           this.teacherSpeech = ''
         }, 3000)
       }
     },
     
     // 停止语音识别
     stopVoiceRecognition() {
       if (this.recognition) {
         this.recognition.stop()
         this.recognition = null
       }
     },
     
     // 处理语音命令
     processVoiceCommand(command) {
       console.log('收到语音命令:', command)
       this.aiStatus = 'processing'
       
       // 简单的命令识别
       if (command.includes('切换场景') || command.includes('换个场景')) {
         this.teacherSpeech = '好的，我来为您切换场景'
         setTimeout(() => {
           const scenes = ['lecture-hall', 'lab', 'seminar']
           const currentIndex = scenes.indexOf(this.currentScene)
           const nextIndex = (currentIndex + 1) % scenes.length
           this.switchScene(scenes[nextIndex])
         }, 1000)
       } else if (command.includes('切换视角') || command.includes('换个视角')) {
         this.teacherSpeech = '好的，我来调整视角'
         setTimeout(() => {
           const views = ['ppt', 'close', 'medium', 'far']
           const currentIndex = views.indexOf(this.viewMode)
           const nextIndex = (currentIndex + 1) % views.length
           this.switchView(views[nextIndex])
         }, 1000)
       } else if (command.includes('下一页') || command.includes('翻页')) {
         this.teacherSpeech = '好的，翻到下一页'
         setTimeout(() => {
           this.nextSlide()
         }, 1000)
       } else if (command.includes('问题') || command.includes('提问')) {
         this.teacherSpeech = '我听到了您的问题，让我来为您解答'
         setTimeout(() => {
           this.startQA()
         }, 1000)
       } else {
         this.teacherSpeech = `我听到您说："${command}"，正在为您处理相关请求`
       }
       
       setTimeout(() => {
         this.aiStatus = this.voiceInteractionEnabled ? 'listening' : 'ready'
       }, 2000)
     },
     
     // 改变语速
     changeSpeechSpeed() {
       const speeds = [0.5, 0.75, 1.0, 1.25, 1.5, 2.0]
       const currentIndex = speeds.indexOf(this.speechSpeed)
       const nextIndex = (currentIndex + 1) % speeds.length
       this.speechSpeed = speeds[nextIndex]
       
       this.teacherSpeech = `语速已调整为 ${this.speechSpeed}x`
       setTimeout(() => {
         this.teacherSpeech = ''
       }, 2000)
     },
     
     // 获取AI状态文本
     getAIStatusText() {
       const statusMap = {
         'ready': '就绪',
         'speaking': '讲话中',
         'listening': '聆听中',
         'processing': '处理中'
       }
       return statusMap[this.aiStatus] || '未知'
     },
     
     // 启动连续问答
     startContinuousQA() {
       this.showContinuousQA = true
       this.interactionCount++
       
       // 添加欢迎消息
       if (this.conversationHistory.length === 0) {
         this.addMessage('ai', '您好！我是您的AI助教，很高兴为您答疑解惑。您可以询问任何关于人工智能课程的问题，我会为您提供详细的解答。')
       }
       
       // 更新数字教师状态
       this.teacherSpeech = '连续问答模式已启动，我随时为您答疑解惑！'
       setTimeout(() => {
         this.teacherSpeech = ''
       }, 3000)
     },
     
     // 关闭连续问答
     closeContinuousQA() {
       this.showContinuousQA = false
       this.stopVoiceInput()
       this.teacherSpeech = '连续问答已结束，期待下次为您服务！'
       setTimeout(() => {
         this.teacherSpeech = ''
       }, 3000)
     },
     
     // 提交问题
     submitQuestion() {
       if (!this.currentQuestion.trim() || this.isAIThinking) return
       
       const question = this.currentQuestion.trim()
       this.addMessage('user', question)
       this.currentQuestion = ''
       this.processQuestion(question)
     },
     
     // 添加消息到对话历史
     addMessage(type, content) {
       const message = {
         type,
         content,
         timestamp: this.formatTime(new Date())
       }
       this.conversationHistory.push(message)
       
       // 自动滚动到底部
       this.$nextTick(() => {
         this.scrollToBottom()
       })
     },
     
     // 处理问题
     processQuestion(question) {
       this.isAIThinking = true
       this.aiStatus = 'processing'
       
       // 模拟AI思考时间
       const thinkingTime = Math.random() * 2000 + 1000 // 1-3秒
       
       setTimeout(() => {
         const answer = this.generateAnswer(question)
         this.addMessage('ai', answer)
         this.isAIThinking = false
         this.aiStatus = 'ready'
         
         // 更新统计数据
         this.updateQAStats()
         
         // 语音播放答案（如果启用）
         if (this.isSpeaking) {
           this.speakText(answer.replace(/<[^>]*>/g, '')) // 移除HTML标签
         }
       }, thinkingTime)
     },
     
     // 生成AI答案
     generateAnswer(question) {
       const lowerQuestion = question.toLowerCase()
       
       // 关键词匹配
       for (const [keyword, knowledge] of Object.entries(this.knowledgeBase)) {
         if (lowerQuestion.includes(keyword.toLowerCase()) || 
             lowerQuestion.includes(keyword)) {
           return this.formatKnowledgeAnswer(keyword, knowledge, question)
         }
       }
       
       // 模式匹配
       if (lowerQuestion.includes('什么是') || lowerQuestion.includes('定义')) {
         return this.handleDefinitionQuestion(question)
       } else if (lowerQuestion.includes('如何') || lowerQuestion.includes('怎么')) {
         return this.handleHowToQuestion(question)
       } else if (lowerQuestion.includes('应用') || lowerQuestion.includes('用途')) {
         return this.handleApplicationQuestion(question)
       } else if (lowerQuestion.includes('区别') || lowerQuestion.includes('不同')) {
         return this.handleComparisonQuestion(question)
       } else if (lowerQuestion.includes('优缺点') || lowerQuestion.includes('优势')) {
         return this.handleAdvantageQuestion(question)
       }
       
       // 默认回答
       return this.generateDefaultAnswer(question)
     },
     
     // 格式化知识库答案
     formatKnowledgeAnswer(keyword, knowledge, question) {
       let answer = `<strong>${keyword}</strong><br><br>`
       answer += `📖 <strong>定义：</strong>${knowledge.definition}<br><br>`
       
       if (knowledge.applications) {
         answer += `🎯 <strong>应用领域：</strong><br>`
         knowledge.applications.forEach(app => {
           answer += `• ${app}<br>`
         })
         answer += '<br>'
       }
       
       if (knowledge.types) {
         answer += `📊 <strong>主要类型：</strong><br>`
         knowledge.types.forEach(type => {
           answer += `• ${type}<br>`
         })
         answer += '<br>'
       }
       
       if (knowledge.components) {
         answer += `🔧 <strong>核心组件：</strong><br>`
         knowledge.components.forEach(comp => {
           answer += `• ${comp}<br>`
         })
         answer += '<br>'
       }
       
       if (knowledge.advantages) {
         answer += `✅ <strong>主要优势：</strong><br>`
         knowledge.advantages.forEach(adv => {
           answer += `• ${adv}<br>`
         })
         answer += '<br>'
       }
       
       answer += `💡 <strong>学习建议：</strong>建议您结合实际案例来理解${keyword}的概念和应用。`
       
       return answer
     },
     
     // 处理定义类问题
     handleDefinitionQuestion(question) {
       return `📚 关于您询问的概念定义：<br><br>
               这是一个很好的问题！在人工智能领域中，准确理解基本概念非常重要。<br><br>
               💡 <strong>学习提示：</strong><br>
               • 建议从基础概念开始学习<br>
               • 结合实际例子来理解抽象概念<br>
               • 多做练习加深理解<br><br>
               如果您需要了解特定概念，请告诉我具体的术语，我会为您详细解释。`
     },
     
     // 处理操作类问题
     handleHowToQuestion(question) {
       return `🛠️ 关于您的操作问题：<br><br>
               学习人工智能需要循序渐进的方法：<br><br>
               📋 <strong>学习步骤：</strong><br>
               1. 掌握数学基础（线性代数、概率统计）<br>
               2. 学习编程语言（Python推荐）<br>
               3. 理解机器学习算法<br>
               4. 实践项目经验<br>
               5. 深入专业领域<br><br>
               💪 <strong>实践建议：</strong>理论学习与动手实践相结合，多参与开源项目。`
     },
     
     // 处理应用类问题
     handleApplicationQuestion(question) {
       return `🎯 关于应用场景：<br><br>
               人工智能在各个领域都有广泛应用：<br><br>
               🏥 <strong>医疗健康：</strong>疾病诊断、药物研发、个性化治疗<br>
               🚗 <strong>交通运输：</strong>自动驾驶、智能交通管理、路径优化<br>
               💰 <strong>金融服务：</strong>风险评估、算法交易、反欺诈检测<br>
               🛒 <strong>电子商务：</strong>推荐系统、价格优化、客户服务<br>
               🎮 <strong>娱乐媒体：</strong>内容推荐、游戏AI、虚拟现实<br><br>
               🌟 每个应用都有其特定的技术要求和实现方式。`
     },
     
     // 处理比较类问题
     handleComparisonQuestion(question) {
       return `⚖️ 关于概念比较：<br><br>
               在AI学习中，理解不同概念之间的区别很重要：<br><br>
               📊 <strong>比较维度：</strong><br>
               • 定义和原理<br>
               • 应用场景<br>
               • 技术实现<br>
               • 优缺点分析<br><br>
               💡 <strong>学习方法：</strong>建议制作对比表格，列出各个概念的特点，这样更容易理解和记忆。<br><br>
               如果您想了解特定概念的比较，请告诉我具体的术语。`
     },
     
     // 处理优势类问题
     handleAdvantageQuestion(question) {
       return `✅ 关于优势分析：<br><br>
               每种AI技术都有其独特的优势：<br><br>
               🎯 <strong>技术优势：</strong><br>
               • 自动化处理能力<br>
               • 大数据分析能力<br>
               • 模式识别准确性<br>
               • 持续学习改进<br><br>
               ⚠️ <strong>注意事项：</strong><br>
               • 数据质量要求高<br>
               • 计算资源需求大<br>
               • 模型解释性挑战<br><br>
               💡 选择合适的技术需要根据具体应用场景来决定。`
     },
     
     // 生成默认答案
     generateDefaultAnswer(question) {
       const responses = [
         `🤔 这是一个很有趣的问题！让我为您分析一下：<br><br>
          根据您的问题，我建议您可以从以下几个角度来思考：<br>
          • 问题的核心概念是什么<br>
          • 相关的技术原理<br>
          • 实际应用场景<br><br>
          💡 如果您能提供更具体的信息，我可以给出更精准的答案。`,
         
         `📚 关于您的问题，我想分享一些见解：<br><br>
          在人工智能学习过程中，这类问题很常见。建议您：<br>
          • 查阅相关的学术资料<br>
          • 结合实际案例理解<br>
          • 多与同学讨论交流<br><br>
          🎯 您也可以尝试重新表述问题，我会尽力为您提供更好的解答。`,
         
         `🔍 您提出了一个值得深入探讨的问题：<br><br>
          这个问题涉及到人工智能的多个方面，我建议您：<br>
          • 先理解基础概念<br>
          • 逐步深入学习<br>
          • 理论结合实践<br><br>
          💪 持续学习是掌握AI知识的关键，加油！`
       ]
       
       return responses[Math.floor(Math.random() * responses.length)]
     },
     
     // 快速提问
     askQuickQuestion(questionText) {
       this.currentQuestion = questionText
       this.submitQuestion()
     },
     
     // 切换语音输入
     toggleVoiceInput() {
       if (this.isVoiceInputActive) {
         this.stopVoiceInput()
       } else {
         this.startVoiceInput()
       }
     },
     
     // 开始语音输入
     startVoiceInput() {
       if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
         const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition
         this.voiceRecognition = new SpeechRecognition()
         this.voiceRecognition.lang = 'zh-CN'
         this.voiceRecognition.continuous = false
         this.voiceRecognition.interimResults = false
         
         this.voiceRecognition.onstart = () => {
           this.isVoiceInputActive = true
           this.teacherSpeech = '正在聆听您的问题...'
         }
         
         this.voiceRecognition.onresult = (event) => {
           const result = event.results[0][0].transcript
           this.currentQuestion = result
           this.teacherSpeech = `我听到您问："${result}"`
           setTimeout(() => {
             this.teacherSpeech = ''
           }, 3000)
         }
         
         this.voiceRecognition.onend = () => {
           this.isVoiceInputActive = false
         }
         
         this.voiceRecognition.onerror = (error) => {
           console.error('语音识别错误:', error)
           this.isVoiceInputActive = false
           this.teacherSpeech = '语音识别出现错误，请重试'
           setTimeout(() => {
             this.teacherSpeech = ''
           }, 3000)
         }
         
         this.voiceRecognition.start()
       } else {
         alert('您的浏览器不支持语音识别功能')
       }
     },
     
     // 停止语音输入
     stopVoiceInput() {
       if (this.voiceRecognition) {
         this.voiceRecognition.stop()
         this.isVoiceInputActive = false
       }
     },
     
     // 清空对话
     clearConversation() {
       this.conversationHistory = []
       this.addMessage('ai', '对话已清空，我们可以重新开始。有什么问题尽管问我吧！')
     },
     
     // 处理输入变化
     handleInputChange() {
       // 可以在这里添加输入提示或自动完成功能
     },
     
     // 滚动到底部
     scrollToBottom() {
       const container = this.$refs.conversationHistory
       if (container) {
         container.scrollTop = container.scrollHeight
       }
     },
     
     // 格式化时间
     formatTime(date) {
       return date.toLocaleTimeString('zh-CN', { 
         hour: '2-digit', 
         minute: '2-digit' 
       })
     },
     
     // 更新问答统计
     updateQAStats() {
       // 模拟统计数据更新
       this.avgResponseTime = (Math.random() * 2 + 0.5).toFixed(1)
       
       // 随机调整准确率（保持在90-98%之间）
       if (Math.random() < 0.3) {
         this.qaAccuracy = Math.max(90, Math.min(98, this.qaAccuracy + (Math.random() - 0.5) * 4))
       }
     },
     
     // 切换左侧面板显示/隐藏
     toggleLeftPanel() {
       this.isLeftPanelHidden = !this.isLeftPanelHidden
       
       // 更新数字教师提示
       if (this.isLeftPanelHidden) {
         this.teacherSpeech = '已进入全屏模式，隐藏所有菜单栏，专注学习体验！'
       } else {
         this.teacherSpeech = '控制面板和菜单栏已恢复，可以进行各种操作设置。'
       }
       
       setTimeout(() => {
         this.teacherSpeech = ''
       }, 3000)
       
       // 播放切换动画
       this.animatePanelToggle()
     },
     
     // 面板切换动画
     animatePanelToggle() {
       if (this.isLeftPanelHidden) {
         // 隐藏左侧面板动画
         gsap.to('.left-panel', {
           x: -250,
           opacity: 0,
           duration: 0.5,
           ease: 'power2.inOut'
         })
         
         // 隐藏顶部控制栏动画
         gsap.to('.top-controls', {
           y: -100,
           opacity: 0,
           duration: 0.5,
           ease: 'power2.inOut'
         })
         
         // 隐藏底部控制栏动画
         gsap.to('.bottom-controls', {
           y: 100,
           opacity: 0,
           duration: 0.5,
           ease: 'power2.inOut'
         })
         
         // 全屏指示器出现动画
         gsap.fromTo('.fullscreen-indicator', 
           { opacity: 0, y: -20 },
           { opacity: 1, y: 0, duration: 0.6, delay: 0.3 }
         )
       } else {
         // 显示左侧面板动画
         gsap.fromTo('.left-panel', 
           { x: -250, opacity: 0 },
           { x: 0, opacity: 1, duration: 0.5, ease: 'power2.inOut' }
         )
         
         // 显示顶部控制栏动画
         gsap.fromTo('.top-controls', 
           { y: -100, opacity: 0 },
           { y: 0, opacity: 1, duration: 0.5, ease: 'power2.inOut' }
         )
         
         // 显示底部控制栏动画
         gsap.fromTo('.bottom-controls', 
           { y: 100, opacity: 0 },
           { y: 0, opacity: 1, duration: 0.5, ease: 'power2.inOut' }
         )
       }
       
       // 切换按钮动画
       gsap.fromTo('.panel-toggle-btn', 
         { scale: 1.2, rotate: 0 },
         { scale: 1, rotate: 360, duration: 0.4, ease: 'back.out(1.7)' }
       )
     },
     
     // 初始化键盘快捷键
     initKeyboardShortcuts() {
       this.keyboardHandler = (event) => {
         // 检查是否在输入框中，如果是则不处理快捷键
         if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
           return
         }
         
         // Tab键切换左侧面板
         if (event.key === 'Tab') {
           event.preventDefault()
           this.toggleLeftPanel()
         }
         
         // F11键切换全屏（浏览器原生全屏）
         if (event.key === 'F11') {
           event.preventDefault()
           this.toggleBrowserFullscreen()
         }
         
         // Escape键退出全屏模式
         if (event.key === 'Escape' && this.isLeftPanelHidden) {
           this.toggleLeftPanel()
         }
       }
       
       document.addEventListener('keydown', this.keyboardHandler)
     },
     
     // 移除键盘快捷键
     removeKeyboardShortcuts() {
       if (this.keyboardHandler) {
         document.removeEventListener('keydown', this.keyboardHandler)
       }
     },
     
     // 切换浏览器全屏
     toggleBrowserFullscreen() {
       if (!document.fullscreenElement) {
         document.documentElement.requestFullscreen().then(() => {
           this.teacherSpeech = '已进入浏览器全屏模式，按F11或Esc退出'
           setTimeout(() => {
             this.teacherSpeech = ''
           }, 4000)
         }).catch(err => {
           console.log('无法进入全屏模式:', err)
           this.teacherSpeech = '您的浏览器不支持全屏模式'
           setTimeout(() => {
             this.teacherSpeech = ''
           }, 3000)
         })
       } else {
         document.exitFullscreen()
       }
     }
  }
}
</script>

<style scoped lang="scss">
.course-3d-classroom {
  width: 100%; height: 100vh; background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); position: relative; overflow: hidden;
}

// 3D场景容器
.classroom-scene {
  width: 100%; height: 100%; position: relative;
  
  .scene-bg {
    width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: all 0.8s ease; filter: brightness(0.8);
  }
  
  // 数字人讲师
  .digital-teacher {
    position: absolute; left: 15%; bottom: 20%; z-index: 10;
    
    .teacher-avatar {
      width: 120px; height: 120px; border-radius: 50%; overflow: hidden; border: 3px solid #3498db; box-shadow: 0 0 20px rgba(52, 152, 219, 0.5);
      
      img {
        width: 100%; height: 100%; object-fit: cover;
      }
    }
    
    .teacher-name {
      text-align: center; color: white; margin-top: 10px; font-weight: bold;
    }
    
    .teacher-speech {
      position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
      
      .speech-bubble {
        background: rgba(255, 255, 255, 0.9); padding: 10px 15px; border-radius: 15px; color: #333; font-size: 14px; max-width: 200px; position: relative;
        
        &::after {
          content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); border: 8px solid transparent; border-top-color: rgba(255, 255, 255, 0.9);
        }
      }
    }
    
         &.teaching {
       animation: teacherGlow 2s ease-in-out infinite alternate;
     }
     
     &.speaking {
       animation: teacherSpeaking 1s ease-in-out infinite alternate;
       
       .teacher-avatar {
         border-color: #9b59b6;
         box-shadow: 0 0 25px rgba(155, 89, 182, 0.8);
       }
       
       .teacher-name {
         color: #9b59b6;
       }
     }
  }
  
  // PPT全息屏
  .hologram-ppt {
    position: absolute; right: 15%; top: 20%; width: 400px; height: 300px; z-index: 10;
    
    .ppt-frame {
      width: 100%; height: 100%; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 15px; padding: 20px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }
    
    .ppt-content {
      color: white; height: 100%; display: flex; flex-direction: column;
      
      h2 {
        margin: 0 0 15px 0; color: #3498db; font-size: 20px;
      }
      
      .slide-content {
        flex: 1; font-size: 14px; line-height: 1.6;
        
        ul {
          margin: 10px 0; padding-left: 20px;
        }
      }
      
      .slide-number {
        text-align: right; font-size: 12px; color: #bdc3c7; margin-top: 10px;
      }
    }
    
    &.ppt {
      width: 500px; height: 400px; right: 10%; top: 15%;
    }
    
    &.close {
      width: 350px; height: 250px;
    }
    
    &.far {
      width: 300px; height: 200px; right: 20%;
    }
  }
  
  // 学生座位
  .student-seats {
    position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); display: flex; gap: 20px; z-index: 5;
    
    .seat {
      width: 40px; height: 40px;
      
      .seat-indicator {
        width: 100%; height: 100%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.3);
      }
      
      &.occupied .seat-indicator {
        background: rgba(46, 204, 113, 0.6); border-color: #2ecc71; box-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
      }
      
      &.empty .seat-indicator {
        background: rgba(149, 165, 166, 0.3); border-color: #95a5a6;
      }
    }
    
    &.close {
      bottom: 8%; gap: 25px;
      
      .seat {
        width: 50px; height: 50px;
      }
    }
    
    &.far {
      bottom: 3%; gap: 15px;
      
      .seat {
        width: 30px; height: 30px;
      }
    }
  }
}

// UI覆盖层
.ui-overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100;
  
  > * {
    pointer-events: auto;
  }
}

// 顶部控制栏
.top-controls {
  display: flex; justify-content: space-between; align-items: center; padding: 20px; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px); transition: all 0.5s ease;
  
  &.hidden {
    transform: translateY(-100%); opacity: 0; pointer-events: none;
  }
  
  .scene-selector {
    display: flex; align-items: center; gap: 20px;
    
    h2 {
      color: white; margin: 0; font-size: 18px;
    }
    
    .scene-buttons {
      display: flex; gap: 10px;
    }
    
    .scene-btn {
      padding: 8px 15px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 8px; color: white; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 5px;
      
      &:hover {
        background: rgba(255, 255, 255, 0.2); transform: translateY(-2px);
      }
      
      &.active {
        background: rgba(52, 152, 219, 0.8); border-color: #3498db; box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
      }
    }
  }
  
  .session-selector {
    color: white; display: flex; align-items: center; gap: 10px;
    
    select {
      padding: 8px 12px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 6px; color: white; cursor: pointer;
      
      option {
        background: #2c3e50; color: white;
      }
    }
  }
}

 // 左侧控制面板
 .left-panel {
   position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 200px; max-height: calc(100vh - 40px); overflow-y: auto; overflow-x: hidden; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(10px); border-radius: 15px; padding: 20px; color: white; transition: all 0.5s ease; z-index: 50;
   
   // 自定义滚动条样式
   &::-webkit-scrollbar {
     width: 6px;
   }
   
   &::-webkit-scrollbar-track {
     background: rgba(255, 255, 255, 0.1); border-radius: 3px;
   }
   
   &::-webkit-scrollbar-thumb {
     background: rgba(255, 255, 255, 0.3); border-radius: 3px;
     
     &:hover {
       background: rgba(255, 255, 255, 0.5);
     }
   }
   
   &.hidden {
     transform: translateY(-50%) translateX(-250px); opacity: 0; pointer-events: none;
   }
  
  h3 {
    margin: 0 0 15px 0;
    font-size: 14px;
    color: #3498db;
  }
  
  .view-buttons, .movement-buttons, .interaction-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 25px;
  }
  
  .view-btn, .move-btn {
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 12px;
    
    &:hover {
      background: rgba(255, 255, 255, 0.2);
    }
    
    &.active {
      background: rgba(52, 152, 219, 0.8);
      border-color: #3498db;
    }
  }
  
  .interaction-buttons {
    button {
      padding: 10px;
      background: rgba(46, 204, 113, 0.2);
      border: 1px solid rgba(46, 204, 113, 0.5);
      border-radius: 6px;
      color: white;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 12px;
      
      &:hover {
        background: rgba(46, 204, 113, 0.4);
        transform: translateY(-2px);
      }
      
      &.active {
        background: rgba(46, 204, 113, 0.8);
      }
      
      &.qa-btn {
        background: rgba(230, 126, 34, 0.2);
        border-color: rgba(230, 126, 34, 0.5);
        
        &:hover {
          background: rgba(230, 126, 34, 0.4);
        }
      }
      
               &.wb-btn {
           background: rgba(155, 89, 182, 0.2);
           border-color: rgba(155, 89, 182, 0.5);
           
           &:hover {
             background: rgba(155, 89, 182, 0.4);
           }
         }
         
         &.continuous-qa-btn {
           background: rgba(46, 204, 113, 0.2);
           border-color: rgba(46, 204, 113, 0.5);
           
           &:hover {
             background: rgba(46, 204, 113, 0.4);
           }
         }
    }
     }
   
   .teacher-ai-panel {
     margin-top: 25px;
     
     h3 {
       margin: 0 0 15px 0;
       font-size: 14px;
       color: #9b59b6;
     }
     
     .ai-controls {
       display: flex;
       flex-direction: column;
       gap: 8px;
       margin-bottom: 20px;
       
       button {
         padding: 10px;
         border: 1px solid rgba(255, 255, 255, 0.3);
         border-radius: 6px;
         color: white;
         cursor: pointer;
         transition: all 0.3s ease;
         font-size: 12px;
         
         &.speech-btn {
           background: rgba(52, 152, 219, 0.2);
           border-color: rgba(52, 152, 219, 0.5);
           
           &:hover {
             background: rgba(52, 152, 219, 0.4);
             transform: translateY(-2px);
           }
           
           &.active {
             background: rgba(52, 152, 219, 0.8);
             animation: speechActive 1.5s ease-in-out infinite alternate;
           }
         }
         
         &.voice-btn {
           background: rgba(155, 89, 182, 0.2);
           border-color: rgba(155, 89, 182, 0.5);
           
           &:hover {
             background: rgba(155, 89, 182, 0.4);
             transform: translateY(-2px);
           }
           
           &.active {
             background: rgba(155, 89, 182, 0.8);
             animation: voiceActive 2s ease-in-out infinite;
           }
         }
         
         &.speed-btn {
           background: rgba(230, 126, 34, 0.2);
           border-color: rgba(230, 126, 34, 0.5);
           
           &:hover {
             background: rgba(230, 126, 34, 0.4);
             transform: translateY(-2px);
           }
         }
       }
     }
     
     .speech-topics {
       margin-bottom: 20px;
       
       h4 {
         margin: 0 0 10px 0;
         font-size: 12px;
         color: #ecf0f1;
       }
       
       .topic-select {
         width: 100%;
         padding: 8px;
         background: rgba(255, 255, 255, 0.1);
         border: 1px solid rgba(255, 255, 255, 0.3);
         border-radius: 6px;
         color: white;
         font-size: 12px;
         cursor: pointer;
         
         option {
           background: #2c3e50;
           color: white;
         }
         
         &:focus {
           outline: none;
           border-color: #9b59b6;
           box-shadow: 0 0 8px rgba(155, 89, 182, 0.3);
         }
       }
     }
     
     .ai-status {
       .status-item {
         display: flex;
         justify-content: space-between;
         padding: 5px 0;
         font-size: 11px;
         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         
         &:last-child {
           border-bottom: none;
         }
         
         .status-label {
           color: #bdc3c7;
         }
         
         .status-value {
           font-weight: bold;
           
           &.ready {
             color: #2ecc71;
           }
           
           &.speaking {
             color: #3498db;
             animation: pulse 1s infinite;
           }
           
           &.listening {
             color: #9b59b6;
             animation: pulse 1.5s infinite;
           }
           
           &.processing {
             color: #e67e22;
             animation: spin 2s linear infinite;
           }
         }
       }
     }
   }
 }
 
 // 右侧信息面板
.right-panel {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 220px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 20px;
  color: white;
  
  h3 {
    margin: 0 0 15px 0;
    font-size: 14px;
    color: #3498db;
  }
  
  .course-card {
    background: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 25px;
    
    h4 {
      margin: 0 0 10px 0;
      color: #f39c12;
    }
    
    p {
      margin: 5px 0;
      font-size: 12px;
      color: #ecf0f1;
    }
    
    .progress-bar {
      width: 100%;
      height: 6px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 3px;
      margin-top: 10px;
      overflow: hidden;
      
      .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #3498db, #2ecc71);
        transition: width 0.3s ease;
      }
    }
  }
  
  .student-list {
    max-height: 120px;
    overflow-y: auto;
    margin-bottom: 25px;
    
    .student-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 5px 0;
      font-size: 12px;
      
      .student-avatar {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        
        &.active {
          background: #2ecc71;
          box-shadow: 0 0 8px rgba(46, 204, 113, 0.5);
        }
        
        &.listening {
          background: #3498db;
          box-shadow: 0 0 8px rgba(52, 152, 219, 0.5);
        }
        
        &.questioning {
          background: #e74c3c;
          box-shadow: 0 0 8px rgba(231, 76, 60, 0.5);
          animation: pulse 1s infinite;
        }
      }
    }
  }
  
  .stat-item {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    
    &:last-child {
      border-bottom: none;
    }
  }
}

// 底部控制栏
.bottom-controls {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 30px; padding: 15px 25px; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(10px); border-radius: 15px; color: white; transition: all 0.5s ease;
  
  &.hidden {
    transform: translateX(-50%) translateY(100px); opacity: 0; pointer-events: none;
  }
  
  .ppt-controls {
    display: flex; align-items: center; gap: 15px;
    
    button {
      padding: 8px 12px; background: rgba(52, 152, 219, 0.2); border: 1px solid rgba(52, 152, 219, 0.5); border-radius: 6px; color: white; cursor: pointer; transition: all 0.3s ease;
      
      &:hover:not(:disabled) {
        background: rgba(52, 152, 219, 0.4);
      }
      
      &:disabled {
        opacity: 0.5; cursor: not-allowed;
      }
    }
    
    .ppt-viewer-btn {
      background: rgba(155, 89, 182, 0.2) !important;
      border-color: rgba(155, 89, 182, 0.5) !important;
      
      &:hover {
        background: rgba(155, 89, 182, 0.4) !important;
        transform: scale(1.05);
        box-shadow: 0 4px 15px rgba(155, 89, 182, 0.3);
      }
    }
  }
  
  .media-controls {
    display: flex; gap: 10px;
    
    button {
      padding: 8px 12px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 6px; color: white; cursor: pointer; transition: all 0.3s ease; font-size: 12px;
      
      &:hover {
        background: rgba(255, 255, 255, 0.2);
      }
      
      &.active {
        background: rgba(46, 204, 113, 0.8); border-color: #2ecc71;
      }
      
      &.share-btn {
        background: rgba(155, 89, 182, 0.2); border-color: rgba(155, 89, 182, 0.5);
        
        &:hover {
          background: rgba(155, 89, 182, 0.4);
        }
      }
    }
  }
  
  .session-info {
    font-size: 12px; color: #bdc3c7;
    
    span {
      margin: 0 5px;
    }
  }
}

// 公共组件样式
.loading-indicator {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; z-index: 200;
  
  .spinner {
    width: 50px; height: 50px; border: 3px solid rgba(255, 255, 255, 0.3); border-top-color: #3498db; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 15px;
  }
}

 .help-tips {
   position: absolute; bottom: 20px; left: 20px; transition: all 0.3s ease;
   
   &.fullscreen-mode {
     left: 50%; transform: translateX(-50%); text-align: center;
   }
   
   .tip {
     background: rgba(0, 0, 0, 0.6); color: white; padding: 5px 10px; border-radius: 6px; font-size: 12px; margin-bottom: 5px; backdrop-filter: blur(5px);
   }
 }
 
 // 面板切换按钮
 .panel-toggle-btn {
   position: absolute; top: 20px; left: 20px; width: 50px; height: 50px; background: rgba(52, 152, 219, 0.2); backdrop-filter: blur(10px); border: 2px solid rgba(52, 152, 219, 0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 20px; color: white; transition: all 0.3s ease; z-index: 200;
   
   &:hover {
     background: rgba(52, 152, 219, 0.4); border-color: rgba(52, 152, 219, 0.6); transform: scale(1.1); box-shadow: 0 8px 25px rgba(52, 152, 219, 0.3);
   }
   
   .toggle-tooltip {
     position: absolute; top: 60px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.8); color: white; padding: 8px 12px; border-radius: 6px; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: all 0.3s ease;
   }
   
   &:hover .toggle-tooltip {
     opacity: 1; transform: translateX(-50%) translateY(-5px);
   }
 }
 
 // 全屏模式指示器
 .fullscreen-indicator {
   position: absolute;
   top: 20px;
   right: 20px;
   background: rgba(46, 204, 113, 0.2);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(46, 204, 113, 0.3);
   border-radius: 10px;
   padding: 15px 20px;
   color: white;
   z-index: 100;
   
   .indicator-text {
     font-size: 16px;
     font-weight: bold;
     color: #2ecc71;
     margin-bottom: 5px;
   }
   
   .indicator-hint {
     font-size: 12px;
     color: #bdc3c7;
   }
 }
 
 // 连续问答面板
 .continuous-qa-panel {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 600px;
   max-height: 80vh;
   background: rgba(0, 0, 0, 0.9);
   backdrop-filter: blur(20px);
   border: 2px solid rgba(46, 204, 113, 0.3);
   border-radius: 20px;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
   z-index: 1000;
   display: flex;
   flex-direction: column;
   
   .qa-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 20px 25px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     
     h3 {
       margin: 0;
       color: #2ecc71;
       font-size: 18px;
       font-weight: bold;
     }
     
     .close-btn {
       width: 30px;
       height: 30px;
       border: none;
       background: rgba(231, 76, 60, 0.2);
       color: #e74c3c;
       border-radius: 50%;
       cursor: pointer;
       font-size: 16px;
       transition: all 0.3s ease;
       
       &:hover {
         background: rgba(231, 76, 60, 0.4);
         transform: scale(1.1);
       }
     }
   }
   
   .qa-content {
     flex: 1;
     display: flex;
     flex-direction: column;
     overflow: hidden;
   }
   
   .conversation-history {
     flex: 1;
     overflow-y: auto;
     padding: 20px;
     max-height: 400px;
     
     .message {
       display: flex;
       margin-bottom: 20px;
       animation: messageSlideIn 0.5s ease-out;
       
       &.user {
         justify-content: flex-end;
         
         .message-content {
           background: rgba(52, 152, 219, 0.2);
           border: 1px solid rgba(52, 152, 219, 0.3);
           margin-left: 50px;
         }
       }
       
       &.ai {
         justify-content: flex-start;
         
         .message-content {
           background: rgba(46, 204, 113, 0.2);
           border: 1px solid rgba(46, 204, 113, 0.3);
           margin-right: 50px;
         }
         
         &.thinking .message-content {
           background: rgba(155, 89, 182, 0.2);
           border: 1px solid rgba(155, 89, 182, 0.3);
         }
       }
       
       .message-avatar {
         width: 40px;
         height: 40px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 18px;
         margin: 0 10px;
         background: rgba(255, 255, 255, 0.1);
         border: 2px solid rgba(255, 255, 255, 0.2);
       }
       
       .message-content {
         flex: 1;
         padding: 15px;
         border-radius: 15px;
         backdrop-filter: blur(10px);
         
         .message-text {
           color: white;
           line-height: 1.6;
           font-size: 14px;
           
           strong {
             color: #f39c12;
           }
         }
         
         .message-time {
           font-size: 11px;
           color: #bdc3c7;
           margin-top: 8px;
           text-align: right;
         }
         
         .thinking-indicator {
           display: flex;
           align-items: center;
           gap: 10px;
           
           .dot {
             width: 8px;
             height: 8px;
             background: #9b59b6;
             border-radius: 50%;
             animation: thinkingDots 1.5s infinite;
             
             &:nth-child(2) {
               animation-delay: 0.3s;
             }
             
             &:nth-child(3) {
               animation-delay: 0.6s;
             }
           }
           
           .thinking-text {
             color: #9b59b6;
             font-style: italic;
           }
         }
       }
     }
   }
   
   .quick-questions {
     padding: 0 20px 15px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     
     h4 {
       margin: 0 0 10px 0;
       color: #f39c12;
       font-size: 14px;
     }
     
     .question-tags {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
       
       .question-tag {
         padding: 6px 12px;
         background: rgba(52, 152, 219, 0.2);
         border: 1px solid rgba(52, 152, 219, 0.3);
         border-radius: 15px;
         color: white;
         font-size: 12px;
         cursor: pointer;
         transition: all 0.3s ease;
         
         &:hover {
           background: rgba(52, 152, 219, 0.4);
           transform: translateY(-2px);
         }
       }
     }
   }
   
   .qa-input-area {
     padding: 20px;
     
     .input-controls {
       display: flex;
       gap: 10px;
       margin-bottom: 15px;
       
       button {
         padding: 8px 15px;
         border: 1px solid rgba(255, 255, 255, 0.3);
         border-radius: 8px;
         color: white;
         cursor: pointer;
         transition: all 0.3s ease;
         font-size: 12px;
         
         &.voice-input-btn {
           background: rgba(155, 89, 182, 0.2);
           border-color: rgba(155, 89, 182, 0.5);
           
           &:hover {
             background: rgba(155, 89, 182, 0.4);
           }
           
           &.active {
             background: rgba(155, 89, 182, 0.8);
             animation: voiceActive 2s ease-in-out infinite;
           }
         }
         
         &.clear-btn {
           background: rgba(231, 76, 60, 0.2);
           border-color: rgba(231, 76, 60, 0.5);
           
           &:hover:not(:disabled) {
             background: rgba(231, 76, 60, 0.4);
           }
           
           &:disabled {
             opacity: 0.5;
             cursor: not-allowed;
           }
         }
       }
     }
     
     .input-wrapper {
       display: flex;
       gap: 10px;
       margin-bottom: 10px;
       
       .question-input {
         flex: 1;
         padding: 12px;
         background: rgba(255, 255, 255, 0.1);
         border: 1px solid rgba(255, 255, 255, 0.3);
         border-radius: 10px;
         color: white;
         font-size: 14px;
         resize: vertical;
         min-height: 60px;
         
         &::placeholder {
           color: #bdc3c7;
         }
         
         &:focus {
           outline: none;
           border-color: #2ecc71;
           box-shadow: 0 0 10px rgba(46, 204, 113, 0.3);
         }
         
         &:disabled {
           opacity: 0.6;
           cursor: not-allowed;
         }
       }
       
       .submit-btn {
         width: 50px;
         height: 50px;
         background: rgba(46, 204, 113, 0.2);
         border: 1px solid rgba(46, 204, 113, 0.5);
         border-radius: 10px;
         color: white;
         cursor: pointer;
         font-size: 18px;
         transition: all 0.3s ease;
         
         &:hover:not(:disabled) {
           background: rgba(46, 204, 113, 0.4);
           transform: scale(1.05);
         }
         
         &:disabled {
           opacity: 0.5;
           cursor: not-allowed;
         }
       }
     }
     
     .input-hints {
       display: flex;
       flex-direction: column;
       gap: 5px;
       
       .hint {
         font-size: 11px;
         color: #95a5a6;
       }
     }
   }
   
   .qa-stats {
     display: flex;
     justify-content: space-around;
     padding: 15px 20px;
     background: rgba(255, 255, 255, 0.05);
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 0 0 18px 18px;
     
     .stat {
       text-align: center;
       
       .stat-label {
         display: block;
         font-size: 11px;
         color: #bdc3c7;
         margin-bottom: 3px;
       }
       
       .stat-value {
         display: block;
         font-size: 14px;
         font-weight: bold;
         color: #2ecc71;
       }
     }
   }
 }

// 动画
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

 @keyframes teacherGlow {
   0% { box-shadow: 0 0 20px rgba(52, 152, 219, 0.5); }
   100% { box-shadow: 0 0 30px rgba(52, 152, 219, 0.8); }
 }
 
 @keyframes teacherSpeaking {
   0% { transform: scale(1); filter: brightness(1); }
   100% { transform: scale(1.05); filter: brightness(1.2); }
 }

 @keyframes pulse {
   0%, 100% { transform: scale(1); }
   50% { transform: scale(1.1); }
 }
 
 @keyframes speechActive {
   0% { box-shadow: 0 0 10px rgba(52, 152, 219, 0.5); transform: scale(1); }
   100% { box-shadow: 0 0 20px rgba(52, 152, 219, 0.8); transform: scale(1.02); }
 }
 
 @keyframes voiceActive {
   0% { box-shadow: 0 0 8px rgba(155, 89, 182, 0.4); }
   50% { box-shadow: 0 0 16px rgba(155, 89, 182, 0.8); }
   100% { box-shadow: 0 0 8px rgba(155, 89, 182, 0.4); }
 }
 
 @keyframes messageSlideIn {
   0% { opacity: 0; transform: translateY(20px); }
   100% { opacity: 1; transform: translateY(0); }
 }
 
 @keyframes thinkingDots {
   0%, 20% { transform: scale(1); opacity: 1; }
   50% { transform: scale(1.5); opacity: 0.7; }
   80%, 100% { transform: scale(1); opacity: 1; }
 }

 // 响应式适配
 @media (max-width: 768px) {
   .left-panel, .right-panel {
     width: 180px; padding: 15px; max-height: calc(100vh - 20px);
     
     &.hidden {
       transform: translateY(-50%) translateX(-200px);
     }
     
     // 小屏幕下滚动条更细
     &::-webkit-scrollbar {
       width: 4px;
     }
   }
   
   .top-controls {
     padding: 10px 15px;
     
     .scene-selector {
       gap: 10px;
       
       h2 {
         font-size: 16px;
       }
       
       .scene-buttons {
         gap: 5px;
       }
       
       .scene-btn {
         padding: 6px 10px; font-size: 12px;
       }
     }
     
     .session-selector {
       font-size: 12px;
       
       select {
         padding: 6px 8px; font-size: 12px;
       }
     }
   }
   
   .bottom-controls {
     flex-direction: column; gap: 15px; padding: 15px;
     
     &.hidden {
       transform: translateX(-50%) translateY(120px);
     }
   }
   
   .hologram-ppt {
     width: 300px; height: 200px;
   }
   
   .digital-teacher .teacher-avatar {
     width: 80px; height: 80px;
   }
   
   .panel-toggle-btn {
     width: 45px; height: 45px; font-size: 18px;
   }
   
   .fullscreen-indicator {
     padding: 10px 15px;
     
     .indicator-text {
       font-size: 14px;
     }
     
     .indicator-hint {
       font-size: 11px;
     }
   }
   
   .continuous-qa-panel {
     width: 90%; max-width: 400px;
   }
 }
 


// 超小屏幕适配
@media (max-width: 480px) {
   .left-panel {
     width: 160px; padding: 12px; font-size: 12px; max-height: calc(100vh - 10px);
     
     h3 {
       font-size: 12px; margin-bottom: 10px;
     }
     
     .view-buttons, .movement-buttons, .interaction-buttons {
       gap: 6px; margin-bottom: 15px;
     }
     
     .view-btn, .move-btn {
       padding: 6px 8px; font-size: 11px;
     }
     
     .interaction-buttons button {
       padding: 8px; font-size: 11px;
     }
     
     .teacher-ai-panel {
       margin-top: 15px;
       
       .ai-controls {
         gap: 6px; margin-bottom: 15px;
         
         button {
           padding: 8px; font-size: 11px;
         }
       }
       
       .speech-topics {
         margin-bottom: 15px;
         
         h4 {
           font-size: 11px; margin-bottom: 8px;
         }
         
         .topic-select {
           padding: 6px; font-size: 11px;
         }
       }
       
       .ai-status {
         .status-item {
           font-size: 10px;
           
           .status-label, .status-value {
             font-size: 10px;
           }
         }
       }
     }
   }
   
   .top-controls {
     padding: 8px 10px; flex-direction: column; gap: 10px;
     
     .scene-selector {
       flex-direction: column; gap: 8px; align-items: center;
       
       h2 {
         font-size: 14px; margin: 0;
       }
       
       .scene-buttons {
         flex-wrap: wrap; justify-content: center; gap: 4px;
       }
       
       .scene-btn {
         padding: 4px 8px; font-size: 11px;
         
         .scene-icon {
           font-size: 12px;
         }
       }
     }
     
     .session-selector {
       font-size: 11px;
       
       select {
         padding: 4px 6px; font-size: 11px;
       }
     }
   }
   
   .panel-toggle-btn {
     width: 40px; height: 40px; font-size: 16px;
   }
   
   .fullscreen-indicator {
     padding: 8px 12px;
     
     .indicator-text {
       font-size: 12px;
     }
     
     .indicator-hint {
       font-size: 10px;
     }
   }
   
       .bottom-controls {
      padding: 10px 12px; gap: 15px;
      
      &.hidden {
        transform: translateX(-50%) translateY(100px);
      }
      
      .ppt-controls {
        gap: 8px;
        
        button {
          padding: 6px 8px; font-size: 11px;
        }
        
        span {
          font-size: 11px;
        }
      }
      
      .media-controls {
        gap: 6px;
        
        button {
          padding: 6px 8px; font-size: 10px;
        }
      }
      
      .session-info {
        font-size: 10px; text-align: center;
        
        span {
          display: block; margin: 2px 0;
        }
      }
    }
    
    .help-tips {
      display: none; // 小屏幕隐藏帮助提示
    }
  }
</style> 